<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>进度条生成器</title>
  <script src="../css/tailwind3.4.17.css"></script>
  <link href="../css/all.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#10B981',
            accent: '#8B5CF6',
            red: '#EF4444',
            yellow: '#EAB308'
          }
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto { content-visibility: auto; }
      .gradient-mask {
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
      }
      .progress-shadow { box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }
    }
  </style>
</head>
<body class="bg-white p-4 min-h-screen relative">
  <div class="fixed right-4 top-1/2 transform -translate-y-1/2 flex flex-col space-y-3 z-10">
    <button id="randomize-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-3 px-4 rounded-lg transition-colors text-sm flex items-center justify-center shadow-md">
      <i class="fa fa-random mr-2"></i> 随机
    </button>
    <button id="copy-btn" class="bg-primary hover:bg-primary/90 text-white py-3 px-4 rounded-lg transition-colors text-sm flex items-center justify-center shadow-md">
      <i class="fa fa-copy mr-2"></i> 复制
    </button>
  </div>

  <main class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
      <section class="lg:col-span-5 bg-gray-50 rounded-xl p-5">
        <h3 class="text-lg font-bold mb-4 flex items-center">
          <i class="fa fa-cogs text-primary mr-2"></i> 设置
        </h3>
        <div class="space-y-5">
          <div class="space-y-2">
            <label class="block font-medium">进度值: <span id="progress-value-display" class="text-primary font-bold">50</span>%</label>
            <input type="range" id="progress-value" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
            <div class="flex justify-between text-sm text-gray-500">
              <span>0%</span>
              <span>100%</span>
            </div>
          </div>
          <div class="space-y-2">
            <label class="block font-medium">进度条颜色</label>
            <div class="grid grid-cols-5 gap-2">
              <button class="color-option w-full h-8 rounded-full bg-primary border-2 border-transparent focus:border-gray-400 ring-2 ring-gray-400" data-color="#3B82F6"></button>
              <button class="color-option w-full h-8 rounded-full bg-secondary border-2 border-transparent focus:border-gray-400" data-color="#10B981"></button>
              <button class="color-option w-full h-8 rounded-full bg-accent border-2 border-transparent focus:border-gray-400" data-color="#8B5CF6"></button>
              <button class="color-option w-full h-8 rounded-full bg-red border-2 border-transparent focus:border-gray-400" data-color="#EF4444"></button>
              <button class="color-option w-full h-8 rounded-full bg-yellow border-2 border-transparent focus:border-gray-400" data-color="#EAB308"></button>
            </div>
            <div style="display: flex;align-items: center;"><input type="color" id="custom-color" value="#3B82F6" class="w-8 h-8 cursor-pointer" title="自定义颜色">自定义颜色</div>
          </div>
          <div class="space-y-2">
            <label class="block font-medium">高度: <span id="height-value-display" class="text-primary font-bold">8</span>px</label>
            <input type="range" id="progress-height" min="2" max="30" value="8" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
          </div>
          <div class="space-y-2">
            <label class="block font-medium">圆角: <span id="radius-value-display" class="text-primary font-bold">4</span>px</label>
            <input type="range" id="border-radius" min="0" max="30" value="4" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
          </div>
          <div class="space-y-2">
            <label class="block font-medium">动画速度: <span id="animation-value-display" class="text-primary font-bold">1</span>秒</label>
            <input type="range" id="animation-speed" min="0.1" max="3" step="0.1" value="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
          </div>
          <div class="space-y-2 pt-1">
            <label class="flex items-center space-x-2 cursor-pointer">
              <input type="checkbox" id="show-text" checked class="form-checkbox h-4 w-4 text-primary rounded">
              <span>显示进度百分比</span>
            </label>
            <label class="flex items-center space-x-2 cursor-pointer">
              <input type="checkbox" id="gradient" class="form-checkbox h-4 w-4 text-primary rounded">
              <span>渐变色</span>
            </label>
            <label class="flex items-center space-x-2 cursor-pointer">
              <input type="checkbox" id="shadow-effect" class="form-checkbox h-4 w-4 text-primary rounded">
              <span>发光效果</span>
            </label>
          </div>
        </div>
      </section>
      <section class="lg:col-span-7 space-y-5">
        <div class="bg-gray-50 rounded-xl p-5">
          <h3 class="text-lg font-bold mb-4 flex items-center">
            <i class="fa fa-eye text-primary mr-2"></i> 预览
          </h3>
          <div class="preview-container p-5 bg-white rounded-lg border border-gray-100">
            <div class="w-full">
              <div id="progress-container" class="w-full bg-gray-100 rounded-full overflow-hidden">
                <div id="progress-bar" class="h-2 bg-primary rounded-full transition-all duration-1000 ease-out" style="width: 50%; height: 8px; border-radius: 4px;"></div>
              </div>
              <div id="progress-text-container" class="mt-3 text-right">
                <span id="progress-text" class="font-medium text-primary">50%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 rounded-xl p-5">
          <h3 class="text-lg font-bold mb-4 flex items-center">
            <i class="fa fa-code text-primary mr-2"></i> 代码
          </h3>
          <div class="relative">
            <div class="flex justify-between items-center mb-2 bg-gray-100 px-3 py-1 rounded-t-lg text-xs">
              <div class="flex space-x-1">
                <span class="w-2 h-2 rounded-full bg-red-400"></span>
                <span class="w-2 h-2 rounded-full bg-yellow-400"></span>
                <span class="w-2 h-2 rounded-full bg-green-400"></span>
              </div>
              <div class="text-gray-500">截图或直接复制代码粘贴到公众号编辑器</div>
            </div>
            <!-- 固定高度的代码区域 -->
            <pre id="code-output" class="bg-gray-900 text-gray-100 p-3 rounded-b-lg overflow-x-auto text-xs md:text-sm h-[180px] gradient-mask"><code>&lt;div style="width: 100%; background-color: #f3f4f6; border-radius: 4px; overflow: hidden;"&gt;
  &lt;div style="width: 50%; height: 8px; border-radius: 4px; background-color: #3B82F6; transition: width 1s ease-out;"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div style="margin-top: 3px; text-align: right;"&gt;
  &lt;span style="font-weight: 500; color: #3B82F6;"&gt;50%&lt;/span&gt;
&lt;/div&gt;</code></pre>
          </div>
        </div>
      </section>
    </div>
  </main>
  <div id="notification" class="fixed bottom-4 right-4 bg-dark text-black px-4 py-2 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 flex items-center text-sm z-20">
    <i class="fa fa-check-circle mr-2 text-green-400"></i>
    <span id="notification-text">复制成功</span>
  </div>
  <script>
    const progressBar = document.getElementById('progress-bar');
    const progressValue = document.getElementById('progress-value');
    const progressValueDisplay = document.getElementById('progress-value-display');
    const progressText = document.getElementById('progress-text');
    const progressHeight = document.getElementById('progress-height');
    const heightValueDisplay = document.getElementById('height-value-display');
    const borderRadius = document.getElementById('border-radius');
    const radiusValueDisplay = document.getElementById('radius-value-display');
    const animationSpeed = document.getElementById('animation-speed');
    const animationValueDisplay = document.getElementById('animation-value-display');
    const showText = document.getElementById('show-text');
    const progressTextContainer = document.getElementById('progress-text-container');
    const gradient = document.getElementById('gradient');
    const shadowEffect = document.getElementById('shadow-effect');
    const colorOptions = document.querySelectorAll('.color-option');
    const customColor = document.getElementById('custom-color');
    const codeOutput = document.getElementById('code-output');
    const copyBtn = document.getElementById('copy-btn');
    const notification = document.getElementById('notification');
    const notificationText = document.getElementById('notification');
    const randomizeBtn = document.getElementById('randomize-btn');
    
    let currentColor = '#3B82F6';
    
    function updateProgressBar() {
      const value = progressValue.value;
      const height = progressHeight.value;
      const radius = borderRadius.value;
      const speed = animationSpeed.value;
      
      progressBar.style.width = `${value}%`;
      progressBar.style.height = `${height}px`;
      progressBar.style.borderRadius = `${radius}px`;
      progressBar.style.transition = `width ${speed}s ease-out`;
      
      if (gradient.checked) {
        progressBar.style.background = `linear-gradient(90deg, ${currentColor} 0%, ${shadeColor(currentColor, -30)} 100%)`;
      } else {
        progressBar.style.background = currentColor;
      }
      
      if (shadowEffect.checked) {
        progressBar.classList.add('progress-shadow');
      } else {
        progressBar.classList.remove('progress-shadow');
      }
      
      progressValueDisplay.textContent = value;
      progressText.textContent = `${value}%`;
      progressTextContainer.style.display = showText.checked ? 'block' : 'none';
      
      updateCode();
    }
    
    function updateCode() {
      const value = progressValue.value;
      const height = progressHeight.value;
      const radius = borderRadius.value;
      const speed = animationSpeed.value;
      
      let style = `width: ${value}%; height: ${height}px; border-radius: ${radius}px;`;
      
      if (gradient.checked) {
        style += ` background: linear-gradient(90deg, ${currentColor} 0%, ${shadeColor(currentColor, -30)} 100%);`;
      } else {
        style += ` background-color: ${currentColor};`;
      }
      
      style += ` transition: width ${speed}s ease-out;`;
      
      if (shadowEffect.checked) {
        style += ` box-shadow: 0 0 15px rgba(${hexToRgb(currentColor)}, 0.5);`;
      }
      
      let html = `<div style="width: 100%; background-color: #f3f4f6; border-radius: ${radius}px; overflow: hidden;">
  <div style="${style}"></div>
</div>`;

      if (showText.checked) {
        html += `
<div style="margin-top: 3px; text-align: right;">
  <span style="font-weight: 500; color: ${currentColor};">${value}%</span>
</div>`;
      }
      
      codeOutput.querySelector('code').textContent = html;
    }
    
    function copyToClipboard() {
      const textarea = document.createElement('textarea');
      textarea.value = codeOutput.textContent;
      document.body.appendChild(textarea);
      
      textarea.select();
      textarea.setSelectionRange(0, 99999); 
      
      try {
        const successful = document.execCommand('copy');
        if (successful) {
          notificationText.textContent = '复制成功';
        } else {
          throw new Error('复制失败');
        }
      } catch (err) {
        notificationText.textContent = '复制失败，请手动复制';
        console.error('复制失败:', err);
      } finally {
        document.body.removeChild(textarea);
        notification.classList.remove('translate-y-20', 'opacity-0');
        notification.classList.add('translate-y-0', 'opacity-100');
        
        setTimeout(() => {
          notification.classList.remove('translate-y-0', 'opacity-100');
          notification.classList.add('translate-y-20', 'opacity-0');
        }, 2000);
      }
    }
    
    function randomizeProgressBar() {
      progressValue.value = Math.floor(Math.random() * 100);
      progressHeight.value = Math.floor(Math.random() * 29) + 2;
      borderRadius.value = Math.floor(Math.random() * 31);
      animationSpeed.value = (Math.random() * 2.9 + 0.1).toFixed(1);
      
      const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
      currentColor = randomColor;
      customColor.value = randomColor;
      
      colorOptions.forEach(option => {
        option.classList.remove('ring-2', 'ring-gray-400');
      });
      
      showText.checked = Math.random() > 0.3;
      gradient.checked = Math.random() > 0.5;
      shadowEffect.checked = Math.random() > 0.5;
      
      updateProgressBar();
      
      progressValueDisplay.textContent = progressValue.value;
      heightValueDisplay.textContent = progressHeight.value;
      radiusValueDisplay.textContent = borderRadius.value;
      animationValueDisplay.textContent = animationSpeed.value;
    }
    
    function shadeColor(color, percent) {
      let R = parseInt(color.substring(1, 3), 16);
      let G = parseInt(color.substring(3, 5), 16);
      let B = parseInt(color.substring(5, 7), 16);

      R = parseInt(R * (100 + percent) / 100);
      G = parseInt(G * (100 + percent) / 100);
      B = parseInt(B * (100 + percent) / 100);

      R = (R < 255) ? R : 255;
      G = (G < 255) ? G : 255;
      B = (B < 255) ? B : 255;

      R = Math.round(R);
      G = Math.round(G);
      B = Math.round(B);

      const RR = ((R.toString(16).length === 1) ? "0" + R.toString(16) : R.toString(16));
      const GG = ((G.toString(16).length === 1) ? "0" + G.toString(16) : G.toString(16));
      const BB = ((B.toString(16).length === 1) ? "0" + B.toString(16) : B.toString(16));

      return "#" + RR + GG + BB;
    }
    
    function hexToRgb(hex) {
      const r = parseInt(hex.slice(1, 3), 16);
      const g = parseInt(hex.slice(3, 5), 16);
      const b = parseInt(hex.slice(5, 7), 16);
      return `${r}, ${g}, ${b}`;
    }
    
    progressValue.addEventListener('input', () => {
      progressValueDisplay.textContent = progressValue.value;
      updateProgressBar();
    });
    
    progressHeight.addEventListener('input', () => {
      heightValueDisplay.textContent = progressHeight.value;
      updateProgressBar();
    });
    
    borderRadius.addEventListener('input', () => {
      radiusValueDisplay.textContent = borderRadius.value;
      updateProgressBar();
    });
    
    animationSpeed.addEventListener('input', () => {
      animationValueDisplay.textContent = animationSpeed.value;
      updateProgressBar();
    });
    
    showText.addEventListener('change', updateProgressBar);
    gradient.addEventListener('change', updateProgressBar);
    shadowEffect.addEventListener('change', updateProgressBar);
    
    colorOptions.forEach(option => {
      option.addEventListener('click', () => {
        colorOptions.forEach(opt => opt.classList.remove('ring-2', 'ring-gray-400'));
        option.classList.add('ring-2', 'ring-gray-400');
        currentColor = option.getAttribute('data-color');
        customColor.value = currentColor;
        updateProgressBar();
      });
    });
    
    customColor.addEventListener('input', () => {
      colorOptions.forEach(opt => opt.classList.remove('ring-2', 'ring-gray-400'));
      currentColor = customColor.value;
      updateProgressBar();
    });
    
    copyBtn.addEventListener('click', copyToClipboard);
    randomizeBtn.addEventListener('click', randomizeProgressBar);
    
    updateProgressBar();
  </script>
</body>
</html>
